<template>
  <div class="contianer">
    <div class="edit-con">为了给您提供更精准的服务，请详细填写您的求租信息</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="发布人" prop="reName">
        <el-input v-model="ruleForm.reName" placeholder="例:张三"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="rePhone">
        <el-input v-model="ruleForm.rePhone" placeholder="例:18312341234"></el-input>
      </el-form-item>
      <el-form-item label="区域" prop="province">
        <el-cascader
          style="width:100%;"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="求租标题" prop="shName">
        <el-input v-model="ruleForm.shName" placeholder="重庆高老九火锅店"></el-input>
      </el-form-item>
      <el-form-item label="期望租金" prop="rentPrice1">
        <el-input v-model="ruleForm.rentPrice1" style="width:190px;"></el-input>
        <span>万元/月-</span>
        <el-input v-model="ruleForm.rentPrice2" style="width:190px;"></el-input>
        <span>万元/月</span>
      </el-form-item>
      <el-form-item label="期望面积" prop="shAcreage1">
        <el-input v-model="ruleForm.shAcreage1" style="width:190px;"></el-input>
        <span>㎡-</span>
        <el-input v-model="ruleForm.shAcreage2" style="width:190px;"></el-input>
        <span>㎡</span>
      </el-form-item>
      <el-form-item label="求租类型" prop="pushType">
        <el-select v-model="ruleForm.pushType" style="width:100%;">
          <el-option label="租用" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="经营业态" prop="isShopType">
        <el-select v-model="ruleForm.isShopType" style="width:100%;">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in list" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配套" prop="isParts">
        <el-checkbox-group v-model="ruleForm.isParts">
          <el-checkbox
            @change="changeBox(item)"
            :label="item.name"
            v-for="(item,index) in checkboxs"
            :key="index"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="基本描述" prop="shDesc">
        <el-input
          type="textarea"
          :rows="4"
          v-model="ruleForm.shDesc"
          placeholder="请输入更多描述：如该铺的营业执照可以转让"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item> -->
      <div class="fabu">
        <el-button type="primary" @click="savePush('ruleForm')">马上发布</el-button>
      </div>
      <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      <!-- </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: [""],
      ruleForm: {
        reName: "",
        rePhone: "",
        pushType: "1",
        shName: "",
        rentPrice1: "",
        rentPrice2: "",
        shAcreage1: "",
        shAcreage2: "",
        isShopType: "",
        isParts: [],
        shDesc: "",
        onArea: "",
        onCity: "",
        province: ""
      },
      shPic: "",
      rules: {
        reName: [{ required: true, message: "请填写发布人", trigger: "blur" }],
        rePhone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          {
            pattern: /^[1]([3-9])[0-9]{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        shName: [{ required: true, message: "请填写店名", trigger: "blur" }],
        rentPrice1: [
          { required: true, message: "请填写租金", trigger: "blur" },
          {
            pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,
            message: "租金请填写数字",
            trigger: "blur"
          }
        ],
        isShopType: [
          { required: true, message: "请选择经营业态", trigger: "change" }
        ],
        shAcreage1: [
          { required: true, message: "请填写面积", trigger: "blur" },
          {
            pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,
            message: "面积请填写数字",
            trigger: "blur"
          }
        ],
        shDesc: [{ required: true, message: "请填写描述", trigger: "blur" }]
      },
      items: [],
      checkboxs: [],
      list: [],
      listBox: []
    };
  },
  created() {
    this.getShopeParts();
    this.getShopeTypeList();
  },
  methods: {
    handleChange(val) {
      this.ruleForm.province = CodeToText[val[0]];
      this.ruleForm.onCity = CodeToText[val[1]];
      this.ruleForm.onArea = CodeToText[val[2]];
    },
    changeBox(e) {
      e.checked = !e.checked;
      if (e.checked) {
        this.listBox.push(e.id);
      } else {
        for (let i = 0; i < this.listBox.length; i++) {
          if (this.listBox[i] == e.id) {
            this.listBox.splice(i, 1);
          }
        }
      }
      console.log(this.listBox);
    },
    savePush(formName) {
      // 保存发布
      var pushData = new FormData();
      pushData.append("seekUserId", this.$store.state.userInfo.userId); // 发布者id
      pushData.append("seekUserName", this.ruleForm.reName); // 发布者id
      pushData.append("seekUserPhone", this.ruleForm.rePhone);
      pushData.append("seekType", this.ruleForm.pushType); // 发布类型
      pushData.append("province", this.ruleForm.province); // 省
      pushData.append("city", this.ruleForm.onCity); // 市
      pushData.append("arer", this.ruleForm.onArea); // 区
      pushData.append("seekTitle", this.ruleForm.shName); // 求租标题
      pushData.append("seekRentU", this.ruleForm.rentPrice1 * 10000); // 租金
      pushData.append("seekRentD", this.ruleForm.rentPrice2 * 10000); // 租金
      pushData.append("seekAcreageU", this.ruleForm.shAcreage1); // 面积
      pushData.append("seekAcreageD", this.ruleForm.shAcreage2); // 面积
      pushData.append("seekShopsType", this.ruleForm.isShopType); // 经营类型
      pushData.append("seekParts", this.listBox); // 经营类型
      pushData.append("seekDescribe", this.ruleForm.shDesc); // 描述
      var flag=/^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      var flag1=/^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.selectedOptions[0]==""){
            this.$message.warning("请选择区域");
            return false;
          }
          if(this.ruleForm.rentPrice2.trim()==""){
            this.$message.warning("请填写租金");
            return false;
          }
          if(!flag.test(this.ruleForm.rentPrice2)){
            this.$message.warning("请填写数字");
            return false;
          }
          if(this.ruleForm.shAcreage2.trim()==""){
            this.$message.warning("请填写面积");
            return false;
          }
          if(!flag1.test(this.ruleForm.shAcreage2)){
            this.$message.warning("请填写数字");
            return false;
          }
          if (this.listBox.length == 0) {
            this.$message.warning("请勾选配套");
            return false;
          }
          this.$http.post(this.$api.seekShops(), pushData).then(res => {
            if (res.data.code === 0) {
              this.$router.push("/setting/myneed");
              //this.$store.state.activeIndex = "/findshop"
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    getShopeTypeList() {
      // 商铺类型 美食餐饮
      this.$http.get(this.$api.getShopsTypes()).then(res => {
        if (res.data.code === 0) {
          this.list = res.data.ShopsTypes;
        }
      });
    },
    getShopeParts() {
      // 配套设施
      this.$http.get(this.$api.getShopsParts()).then(res => {
        if (res.data.code === 0) {
          this.checkboxs = res.data.Partss;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped lang="less">
.demo-ruleForm {
  width: 600px;
  margin: auto;
}
.edit-con {
  color: #ff5001;
  font-size: 17px;
  text-align: center;
  padding-bottom: 20px;
}
.contianer {
  //width: 1200px;
  margin: 20px auto;
  background: #fff;
  padding: 20px;
  text-align: left;
  line-height: 35px;
  font-size: 16px;
}
.fabu {
  margin: 50px 0;
  text-align: center;
  button {
    background: #ff5001;
    color: #fff;
    border: 1px solid #ff5001;
    width: 200px;
    font-size: 15px;
  }
}
</style>
